<template>
  <div class="box">
    <aside-box>
      <template #zh> 折线图 </template>
      <template #en> line chart </template>
      <div class="line" ref="lineRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";
import * as echarts from "echarts";

const option = {
  legend: {
    icon: "circle",
    top: "0",
    width: "100%",
    right: "center",
    itemWidth: 10,
    itemHeight: 10,
    data: ["注册人数", "使用人数"],
    textStyle: {
      color: "rgba(255,255,255,.5)",
    },
  },

  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "#dddc6b",
      },
    },
  },
  grid: {
    left: "10",
    top: "20",
    right: "3%",
    bottom: "10",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          fontSize: 12,
        },
      },
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    {
      axisPointer: { show: false },
      axisLine: { show: false },
      position: "bottom",
    },
  ],

  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      splitNumber: 4,
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },

      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          type: "dotted",
        },
      },
    },
  ],
  series: [
    {
      name: "注册人数",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          color: "rgba(31, 174, 234, 1)",
          width: 2,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(31, 174, 234, 0.4)",
              },
              {
                offset: 0.8,
                color: "rgba(31, 174, 234, 0.1)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
        },
      },
      itemStyle: {
        normal: {
          color: "#1f7eea",
          borderColor: "rgba(31, 174, 234, .1)",
          borderWidth: 5,
        },
      },
      data: [3, 6, 3, 6, 3, 9, 3],
    },
    {
      name: "使用人数",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          color: "#6bdd9b",
          width: 2,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(107, 221, 155, 0.4)",
              },
              {
                offset: 0.8,
                color: "rgba(107, 221, 155, 0.1)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
        },
      },
      itemStyle: {
        normal: {
          color: "#6bdd9b",
          borderColor: "rgba(107, 221, 155, .1)",
          borderWidth: 5,
        },
      },
      data: [5, 3, 7, 1, 8, 3, 5],
    },
  ],
};

// 实例化echarts
const [lineRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .line {
    width: 100%;
    height: 200px;
  }
}

:deep(.custom-tooltip) {
  color: #fff !important;
}
</style>